<!--
 * @Author: wangzm
 * @Date: 2020-03-04 11:27:32
 * @LastEditors: wjk
 * @LastEditTime: 2020-11-30 18:48:48
 * @Description: base-list-state
 -->
<template>
  <view class="base-list-state">
    <template v-if="listState.loading">
      <view v-if="listQuery.page_no > 1" class="state-content">加载中</view>
    </template>
    <template v-else>
      <template v-if="listLength">
        <template v-if="listLength < minLength"></template>
        <template v-else>
          <view v-if="listState.more" class="state-content">上拉加载更多</view>
          <view v-else class="state-content">我是有底线的</view>
        </template>
      </template>
      <template v-else>
        <view v-if="listEmpty.type" class="empty-content">
          <msg-page :type="listEmpty.type" :text="listEmpty.text" :btn-text="listEmpty.btnText" @btnClick="btnClick" />
        </view>
        <view v-else class="state-content">暂无数据哦~~</view>
      </template>
    </template>
  </view>
</template>
<script>
import MsgPage from '@/components/msgPage'
export default {
  components: {
    MsgPage
  },
  props: {
    listLength: { // 列表长度
      type: Number,
      default: 0
    },
    minLength: { // 列表长度大于最小长度才显示列表状态
      type: Number,
      default: 6
    },
    listQuery: { // 列表分页信息
      type: Object,
      default() {
        return {
          page_no: 1,
          page_size: 20
        }
      }
    },
    listState: { // 列表加载状态
      type: Object,
      default() {
        return {
          loading: false,
          more: true
        }
      }
    },
    listEmpty: { // 空数据显示配置
      type: Object,
      default() {
        return {
          type: '',
          text: '',
          btnText: ''
        }
      }
    }
  },
  methods: {
    btnClick() {
      this.$emit('btnClick')
    }
  }
}
</script>
<style lang="scss">
.base-list-state{
  text-align: center;
  .state-content{
    padding: 24rpx;
  }
  .empty-content{
    padding: 100rpx 24rpx 100rpx;
  }
}
</style>
